<template>

  <div class="module-page" v-if="showHeader">
    <div class="module-page-left">
      <div class="module-page-left-top">
        <div v-for="(item,index) in moudleList"
             :key="index"
             class="module-page-left-top-item"
             :class="`gl${index}`">
          <img class="module-page-left-top-img"
               :src="item.url"
               alt=""
               srcset="">
          <div class="module-page-left-top-item-lable">{{item.lable}}</div>
        </div>
      </div>
      <div class="module-page-left-bottom">操作</div>
    </div>
    <div class="module-page-center">
      <div class="module-page-left-top">
        <div v-for="(item,index) in moudleList2"
             :key="index"
             class="module-page-left-center-item">
          <img class="module-page-left-top-img"
               :src="item.url"
               alt=""
               srcset="">
          <div class="module-page-left-top-item-lable">{{item.lable}}</div>
        </div>
      </div>
      <div class="module-page-left-bottom">模型编辑</div>
    </div>
    <div class="rightShow2">
      <div class="module-page-left" style="width: 362px;">
        <div class="module-page-left-top"  >
          <div v-for="(item,index) in moudleList6"
               :key="index"
               class="module-page-left-top-item"
               :class="`gl${index}`">
            <img class="module-page-left-top-img"
                 :src="item.url"
                 alt=""
                 srcset="">
            <div class="module-page-left-top-item-lable">{{item.lable}}</div>
          </div>
        </div>
        <div class="module-page-left-bottom">显示样式</div>
      </div>
      <div class="module-page-left"  style="width: 210px;">
        <div class=" module-page-left-topCol1">
          <div v-for="(item,index) in moudleList7"
               :key="index"
               class="module-page-left-top-item33"
               @click="handleShowModule(item)"
               >
            <img class="module-page-left-top-img"
                 :src="item.url"
                 alt=""
                 srcset="">
            <div class="module-page-left-top-item-lable">{{item.lable}}</div>
          </div>
        </div>
        <div class="module-page-left-bottom333">BOM清单</div>
      </div>
      <div class="">
        <div class="module-page-left-topCol">
          <div v-for="(item,index) in moudleList8"
               :key="index"
               class="module-page-left-top-item33"
               >
            <img class="module-page-left-top-img"
                 :src="item.url"
                 alt=""
                 srcset="">
            <div class="module-page-left-top-item-lable">{{item.lable}}</div>
          </div>
        </div>
        <div class="module-page-left-bottom333">查找</div>
      </div>
    </div>
 
    <div class="rightShow">
      <div class="module-page-right  ">
        <div class="module-page-right-center">
          <div class="module-page-left-top">
            <img :src="m16"
                 alt=""
                 srcset=""
                 class="module-page-left-top-img">
            着色
          </div>
          <div class="module-page-left-bottom"
               @click="handleIsShow">
            显示样式
            <img :src="m20"
                 alt=""
                 srcset=""
                 class="module-page-left-top-img20">
          </div>
          <div class="module-page-right-line"
               v-if="isShow">
            <div class="module-page-right-line-left"
                 v-for="(item,index) in moudleList3"
                 :key="index">
              <img :src="item.url"
                   alt=""
                   srcset=""
                   class="module-w-28">
              {{ item.lable }}
            </div>
          </div>
        </div>

        <div class="module-page-right-center">
          <div class="module-page-left-top"  @click="handleShowModule({id:100})">
            <img :src="m17"
                 alt=""
                 srcset=""
                 class="module-page-left-top-img">
            自动提取
          </div>
          <div class="module-page-left-bottom"
               @click="handleIsShow1">
            BOM清单
            <img :src="m20"
                 alt=""
                 srcset=""
                 class="module-page-left-top-img20">
          </div>
          <div class="module-page-right-line"
               v-if="isShow1">
            <div class="module-page-right-line-left"
                 v-for="(item,index) in moudleList4"
                 :key="index"  >
              <img :src="item.url"
                   alt=""
                   srcset=""
                   class="module-w-28">
              {{ item.lable }}
            </div>
          </div>
        </div>

        <div class="module-page-right-center">
          <div class="module-page-left-top">
            <img :src="m18"
                 alt=""
                 srcset=""
                 class="module-page-left-top-img">
            查找模型
          </div>
          <div class="module-page-left-bottom"
               @click="handleIsShow2">
            查找
            <img :src="m20"
                 alt=""
                 srcset=""
                 class="module-page-left-top-img20">
          </div>
          <div class="module-page-right-line"
               v-if="isShow2">
            <div class="module-page-right-line-left"
                 v-for="(item,index) in moudleList5"
                 :key="index">
              <img :src="item.url"
                   alt=""
                   srcset=""
                   class="module-w-28">
              <div> {{ item.lable }}</div>
            </div>
          </div>
        </div>
        <div class="module-page-hui">
          <img :src="m19"
               alt=""
               srcset=""
               class="module-page-hui-img">
        </div>
      </div>
    </div> 
  </div>  
  <div class="drawer-more">  
    <moduleDrawer  />    
 <div>  

</div>              
  </div>    

</template>
<script setup lang='ts'>
import { ref  } from 'vue'
  import moduleDrawer from '@/components/modelPage/moduleDrawer.vue';
import {useCommomStore} from "@/pinia/store/commom.pinia"
  import {storeToRefs} from 'pinia';  
import m1 from "../../assets/img/m1.png" 
import m2 from "../../assets/img/m2.png" 
import m3 from "../../assets/img/m3.png" 
import m4 from "../../assets/img/m4.png" 
import m5 from "../../assets/img/m5.png" 
import m6 from "../../assets/img/m6.png" 

import m7 from "../../assets/img/m7.png" 
import m8 from "../../assets/img/m8.png" 
import m9 from "../../assets/img/m9.png" 
import m10 from "../../assets/img/m10.png" 
import m11 from "../../assets/img/m11.png" 
import m12 from "../../assets/img/m12.png" 
import m13 from "../../assets/img/m13.png" 
import m14 from "../../assets/img/m14.png" 
import m15 from "../../assets/img/m15.png" 
import m16 from "../../assets/img/m16.png" 
import m17 from "../../assets/img/m17.png" 
import m18 from "../../assets/img/m18.png" 
import m19 from "../../assets/img/m19.png" 
import m20 from "../../assets/img/m20.png" 


import m21 from "../../assets/img/m21.png" 
import m22 from "../../assets/img/m22.png" 
import m23 from "../../assets/img/m23.png" 
import m24 from "../../assets/img/m24.png" 
import m25 from "../../assets/img/m25.png" 
import m26 from "../../assets/img/m26.png"  
const storeCommomStore = useCommomStore();
const {showHeader} =  storeToRefs(storeCommomStore)
 
 const handleShowModule =(item)=>{
  console.log('---------',item)
   storeCommomStore.setShowModal()
 }
const moudleList = ref([
  {lable:"平移",id:0,url:m1},
  {lable:"焦点适应",id:1,url:m2},
  {lable:"缩放",id:2,url:m3},
  {lable:"旋转",id:3,url:m4},
  {lable:"自适应",id:4,url:m5},
  {lable:"画布刷新",id:5,url:m6},
])
const moudleList2 = ref([
  {lable:"撤销",id:7,url:m7},
  {lable:"外观材质",id:8,url:m8},
  {lable:"剖切",id:9,url:m9},
  {lable:"格式刷",id:10,url:m10},
  {lable:"包围盒",id:11,url:m11},
  {lable:"重做",id:12,url:m12},
  {lable:"透明度",id:13,url:m13},
  {lable:"爆炸",id:14,url:m14},
  {lable:"合模",id:15,url:m15},
])
const moudleList3=[
  {lable:"消隐",id:16,url:m21},
  {lable:"半透明",id:17,url:m22},
  {lable:"隐藏",id:18,url:m23},
  {lable:"线框",id:19,url:m24} 
]
const moudleList4=[
  {lable:"自动提取",id:16,url:m25},
  {lable:"自定义",id:161,url:m25},
    
]
const moudleList5=[
 
  {lable:"查找模型",id:17,url:m26}, 
  {lable:"参数属性",id:18,url:m26}, 
]
const moudleList6 = ref([
  {lable:"着色",id:0,url:m1},
  {lable:"半透明",id:1,url:m2},
  {lable:"线框",id:2,url:m3},
  {lable:"消隐",id:3,url:m4},
  {lable:"隐藏",id:4,url:m5}, 
])
const moudleList7 = ref([
  {lable:"自动提取",id:100,url:m1},
  {lable:"自定义属性",id:1,url:m2} 
])
// BOM清单
const moudleList8 = ref([
  {lable:"查找模型",id:0,url:m1},
  {lable:"查找参数属性",id:1,url:m2} 
])
// 查找
const isShow = ref(false);
const isShow1 = ref(false);
const isShow2 = ref(false);
 const handleIsShow =() =>{
  isShow.value = !isShow.value;
  isShow1.value=false
  isShow2.value=false
 }
 const handleIsShow1 =() =>{
  isShow1.value = !isShow1.value;
  isShow.value=false
  isShow2.value=false
 }
 const handleIsShow2 =() =>{
  isShow2.value = ! isShow2.value ;
  isShow.value=false
  isShow1.value=false
 }
 
  
</script>
<style scoped lang="scss"> 
@import url("./css/modelPage.scss");
 
</style>